<template>
  <el-drawer title="签到" :before-close="handleClose" :visible.sync="addShow" direction="rtl" custom-class="demo-drawer" size="500px">
    <div class="flex-line center sign-box">
      <div class="img-size">
        <el-image v-if="data.cover && data.cover!==&quot;&quot;" style="width: 200px; height: auto" :src="data.cover" :preview-src-list="[data.cover]" :z-index="999999" />
        <div v-else class="img-size w100 img-null">
          <i class="el-icon-picture-outline" />
        </div>
      </div>
      <div class="flex-1 pl-20">
        <p class="title">{{ data.title }}</p>
        <p class="pt-10">{{ data.content }}</p>
        <div class="flex-line tip pt-10">
          <span class="pr-20">{{ data.beginAt }}开课</span>{{ data.visitorCount?data.visitorCount:0 }}人已报名
        </div>
        <div class="flex-line center pt-10">
          <el-avatar class="mr-10" :src="data.staffHeadImg" icon="el-icon-user-solid" />
          {{ data.staffName }}
        </div>
      </div>
    </div>
    <div class="flex-line center p-20">
      <el-table v-loading="loadingTable" :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="staffName" label="姓名" />
        <el-table-column v-if="type===&quot;edit&quot;" label="是否签到" width="100">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" @change="signInFun(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script>
import { recordRequest, signRequest } from '../api'
export default {
  props: {
  },
  data () {
    return {
      loadingTable: true,
      tableData: [],
      addShow: false,
      direction: 'rtl',
      data: {},
      type: 'edit',
      flag: false
    }
  },
  created () {
    // this.mainFun();
  },
  methods: {
    mainFun (id, obj, type) {
      this.data = { ...obj }
      this.addShow = true
      this.type = type
      recordRequest({ offlineCourseId: this.data.id }).then(res => {
        this.loadingTable = false
        this.tableData = res.content
      }).finally(() => {
        this.loadingTable = false
      })
    },
    // 点击签到
    signInFun (index) {
      if (this.flag) {
        return
      }
      this.flag = true
      const data = {}
      data.offlineCourseId = this.tableData[index].offlineCourseId
      data.staffId = this.tableData[index].staffId // 预约人的id
      data.checked = this.tableData[index].checked
      signRequest(data, 'post').then(() => {
        this.flag = false
        this.$message.success(`${this.tableData[index].checked ? '签到成功' : '取消签到'}`)
        // this.mainFun();
      })
    },
    handleClose (done) {
      this.addShow = false
    }
  }
}
</script>

<style lang='scss' scoped>
.sign-box {
  padding: 0 20px;
  .img-size {
    max-height: 200px;
    overflow: hidden;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .tip {
    font-size: 12px;
    color: #666;
  }
}
</style>
